<template>
    <div class="main">
        <van-nav-bar
            :title="$t('m.Language')"
            left-arrow
            @click-left="onClickLeft"
        />
        <!--<van-radio-group v-model="radio">-->
            <!--<van-radio name="1">Burmese <img src="" alt="" ></van-radio>-->
            <!--<van-radio name="2">English <img src="../../static/img/.png" alt=""></van-radio>-->
        <!--</van-radio-group>-->
        <div class="language-bar" @click="selectLanguage('burmese')">
            <div class="outer-circle">
                <div class="inner-circle" v-if="!selectEnglish">
                </div>
            </div>
            <div>Burmese</div>
            <img src="../../static/img/burmese.png" style="width:30px;marginLeft:15px">
        </div>
        <div class="language-bar"  @click="selectLanguage('english')">
            <div class="outer-circle">
                <div class="inner-circle" v-if="selectEnglish">
                </div>
            </div>
            <div>English</div>
            <img src="../../static/img/english.png" style="width:30px;marginLeft:15px">
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                selectEnglish:true,
            }
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            selectLanguage(lan){
                this.selectEnglish=!this.selectEnglish
                if(lan==='burmese'){
                    this.$i18n.locale = 'MM'
                    window.localStorage.setItem('lang','MM')
                    this.$store.commit('store/updateLang', 'MM')
                }
                else if(lan==='english'){
                    this.$i18n.locale = 'US'
                    window.localStorage.setItem('lang','US')
                    this.$store.commit('store/updateLang', 'US')
                }
                this.$router.push('/')
            },
        },
        mounted(){
            let language=window.localStorage.getItem('lang')
            if(language&&language=='MM'){
                this.selectEnglish=false
            }
            else{
                this.selectEnglish=true
            }
        }
    };
</script>
<style>
    .main{
        font-family: Zawgyi-One, Heslvetica Neue,Helvetica,Arial,sans-serif !important;
    }
    .language-bar{
        display:flex;
        align-items:center;
        font-size:18px;
        margin:15px 5px;
    }
    .language-bar .outer-circle{
        width:20px;
        height:20px;
        border-radius:50%;
        border:solid 2px #666666;
        position:relative;
        margin:5px 10px 5px 15px;
    }
    .language-bar .outer-circle .inner-circle{
        position:absolute;
        width:10px;
        height:10px;
        border-radius:50%;
        background:#666666;
        left:3px;
        top:3px;
    }


</style>
